<template>
  <!-- 新增全局背景层 -->
  <view class="bg-layer"></view>
  
  <view class="container">
    <!-- 标题区域 -->
    <view class="header">
      <text class="title">上传奖品</text>
      <view class="title-decoration"></view>
    </view>
    
    <!-- 表单区域 -->
    <view class="form-card">
      <view class="form-bg"></view>
      
      <view class="input-group">
        <uni-icons class="input-icon" type="gift" size="18" color="#4a90e2"></uni-icons>
        <input 
          class="input" 
          v-model="form.name" 
          placeholder="奖品名称"
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="input-group">
        <uni-icons class="input-icon" type="star" size="18" color="#FFD700"></uni-icons>
        <input 
          class="input" 
          v-model.number="form.points" 
          type="number" 
          placeholder="所需积分"
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="input-group">
        <uni-icons class="input-icon" type="cart" size="18" color="#4CAF50"></uni-icons>
        <input 
          class="input" 
          v-model.number="form.stock" 
          type="number" 
          placeholder="库存数量"
          placeholder-class="placeholder"
        />
      </view>
      
      <!-- 图片上传区域 -->
      <view class="upload-section">
        <button 
          class="upload-button"
          @click="chooseImage"
          :class="{ 'has-image': form.image }"
        >
          <view class="button-content">
            <uni-icons 
              :type="form.image ? 'checkmarkempty' : 'camera'" 
              size="20" 
              :color="form.image ? '#4CAF50' : '#4a90e2'"
            ></uni-icons>
            <text>{{ form.image ? '已选择图片' : '选择奖品图片' }}</text>
          </view>
        </button>
        
        <image 
          v-if="form.image" 
          :src="form.image" 
          class="preview-image"
          mode="aspectFill"
        />
      </view>
      
      <!-- 提交按钮 -->
      <button 
        class="submit-button"
        @click="uploadItem"
        :disabled="uploading || !formValid"
        :class="{ 
          'uploading': uploading,
          'disabled': !formValid
        }"
      >
        <view class="button-content">
          <template v-if="uploading">
            <view class="spinner"></view>
            <text>上传中...</text>
          </template>
          <template v-else>
            <uni-icons type="cloud-upload" size="20" color="#fff"></uni-icons>
            <text>上传奖品</text>
          </template>
        </view>
        <view class="button-wave" v-if="!uploading && formValid"></view>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      admin: {},
      form: {
        name: '',
        points: 0,
        stock: 0,
        image: ''
      },
      uploading: false
    };
  },
  computed: {
    formValid() {
      return this.form.name && this.form.points > 0 && this.form.stock >= 0 && this.form.image;
    }
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: async (res) => {
          uni.showLoading({ title: '图片上传中', mask: true });
          try {
            const uploadRes = await uniCloud.uploadFile({
              filePath: res.tempFilePaths[0],
              cloudPath: `prizes/${Date.now()}_${Math.floor(Math.random() * 1000)}.jpg`
            });
            this.form.image = uploadRes.fileID;
            uni.hideLoading();
          } catch (e) {
            uni.hideLoading();
            uni.showToast({ 
              title: '图片上传失败', 
              icon: 'none',
              position: 'bottom'
            });
          }
        },
        fail: () => {
          uni.showToast({ 
            title: '选择图片失败', 
            icon: 'none',
            position: 'bottom'
          });
        }
      });
    },
    async uploadItem() {
          if (!this.form.name || !this.form.points || !this.form.stock || !this.form.image) {
            uni.showToast({ title: '请输入完整信息', icon: 'none' });
            return;
          }
          this.uploading = true;
          try {
            const res = await uniCloud.callFunction({
              name: 'uploadItem',
              data: this.form
            });
            if (res.result.code === 0) {
              uni.showToast({ title: '上传奖品成功', icon: 'success' });
              this.form = { name: '', points: 0, stock: 0, image: '' };
            } else {
              uni.showToast({ title: res.result.msg, icon: 'none' });
            }
          } catch (e) {
            uni.showToast({ title: '上传失败', icon: 'none' });
          } finally {
            this.uploading = false;
          }
      },
    resetForm() {
      this.form = {
        name: '',
        points: 0,
        stock: 0,
        image: ''
      };
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
.container {
  position: relative;
  padding: 20px;
  min-height: 100vh;
  z-index: 1;
}

.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 30vh;
  background: linear-gradient(135deg, #4a90e2 0%, #5aa1ff 100%);
  z-index: 0;
  border-radius: 0 0 20% 20%;
}

/* 标题区域 */
.header {
  position: relative;
  margin-bottom: 24px;
  text-align: center;
  padding: 12px 0;
}

.title {
  font-size: 24px;
  font-weight: 700;
  color: white;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.title-decoration {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 100%;
  background: rgba(255,255,255,0.2);
  border-radius: 60px;
  filter: blur(10px);
  z-index: 1;
}

/* 表单卡片 */
.form-card {
  position: relative;
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(74, 144, 226, 0.15);
  margin-bottom: 24px;
  overflow: hidden;
}

.form-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(74, 144, 226, 0.05) 100%);
}

/* 输入框组 */
.input-group {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.8);
  border-radius: 12px;
  padding-left: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s;
}

.input-group:active {
  transform: scale(0.98);
}

.input-icon {
  margin-right: 10px;
  opacity: 0.7;
}

.input {
  flex: 1;
  height: 50px;
  font-size: 16px;
  color: #333;
  padding: 0 12px;
}

.placeholder {
  color: #aaa;
  font-size: 15px;
}

/* 图片上传区域 */
.upload-section {
  margin: 24px 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.upload-button {
  flex: 1;
  background: rgba(255,255,255,0.9);
  border: 1px dashed rgba(74, 144, 226, 0.3);
  border-radius: 12px;
  padding: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.upload-button.has-image {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.05);
}

.button-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #4a90e2;
}

.upload-button.has-image .button-content {
  color: #4CAF50;
}

.preview-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 提交按钮 */
.submit-button {
  position: relative;
  width: 100%;
  height: 50px;
  background: linear-gradient(45deg, #4a90e2, #5aa1ff);
  color: white;
  border-radius: 12px;
  border: none;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
  transition: all 0.3s;
}

.submit-button:active:not(.disabled) {
  transform: scale(0.98);
}

.submit-button.disabled {
  background: #e0e0e0;
  color: #9e9e9e;
  box-shadow: none;
}

.button-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
}

.submit-button:not(.disabled):active .button-wave {
  opacity: 1;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>